<template>
	<Page page="Mine" title="个人中心" icon="/static/svg/mine-index.svg" />
	<view class="user-card">
		<view class="user-avatar-section">
			<view class="avatar-container">
				<image class="user-avatar" :src="PageData.Info.avatar || `/static/svg/avatar.svg`" />
			</view>
			<view class="user-basic-info">
				<view class="user-name">{{ PageData.Info.nickName }}</view>
				<view class="user-level advanced">
					<up-image src="/static/svg/mine-huiz.svg" width="20px" height="20px"></up-image>
					<view>九号新星</view>
				</view>
				<view class="user-id"># 未设置编号</view>
			</view>
		</view>
		<view class="user-stats">
			<view class="stat-item">
				<up-image src="/static/svg/mine-join.svg" width="40px" height="40px"></up-image>
				<view class="stat-content">
					<view class="stat-number">{{ PageData.Data.joinEvent }}</view>
					<view class="stat-label">参与活动</view>
				</view>
			</view>
			<view class="stat-item">
				<up-image src="/static/svg/mine-get.svg" width="40px" height="40px"></up-image>
				<view class="stat-content">
					<view class="stat-number">{{ PageData.Data.badge }}</view>
					<view class="stat-label">获得徽章</view>
				</view>
			</view>
			<view class="stat-item">
				<up-image src="/static/svg/number.svg" width="40px" height="40px"></up-image>
				<view class="stat-content">
					<view class="stat-number">{{ PageData.Data.friends }}</view>
					<view class="stat-label">好友</view>
				</view>
			</view>
			<view class="stat-item">
				<up-image src="/static/svg/mine-pm.svg" width="40px" height="40px"></up-image>
				<view class="stat-content">
					<view class="stat-number">#{{ PageData.Data.ranking }}</view>
					<view class="stat-label">排名</view>
				</view>
			</view>
		</view>
	</view>

	<view class="profile-completion-card" :class="{ 'completed' :  PageData.auth === 1 }">
		<view class="completion-header">
			<block v-if="PageData.auth === 0">
				<view class="completion-icon iconfont">&#xeafe;</view>
				<view class="completion-title">
					<view class="title">完善个人信息</view>
					<view class="desc">完善信息可获得更好的服务体验</view>
				</view>
			</block>
			<block v-else>
				<view class="celebration-icon iconfont">&#xe61b;</view>
				<view class="completion-title completed">
					<view class="title">恭喜！信息已完善</view>
					<view class="desc">您已获得完整的服务体验权限</view>
				</view>
			</block>
		</view>
		<block v-if="PageData.auth === 0">
			<view class="missing-items">
				<Tag name="missing" icon="&#xe60f;" text="手机验证" />
				<Tag name="missing" icon="&#xe62f;" text="基础信息" />
				<Tag name="missing" icon="&#xe634;" text="实名信息" />
			</view>
			<up-button text="立即完善" icon="lock-open" iconColor="#ffffff" size="small" :customStyle="{
					height: '44px',
					borderRadius: '10px',
					border: 'none',
					color: '#ffffff',
					background: 'linear-gradient(135deg, #f59e0b, #d97706)',
					boxShadow: '0 4px 16px rgba(245, 158, 11, 0.3)'
			}" @click="ToOver"></up-button>
		</block>
		<blcok v-else>
			<view class="rewards-section">
				<view class="reward-item">
					<view class="reward-icon iconfont">&#xe646;</view>
					<view class="reward-text">获得 50 积分奖励</view>
				</view>
				<view class="reward-item">
					<view class="reward-icon iconfont">&#xe65b;</view>
					<view class="reward-text">解锁高级功能</view>
				</view>
			</view>
			<view class="action-buttons">
				<up-button text="编辑资料" iconColor="#065f46" icon="setting" size="small" :customStyle="{
								height: '44px',
								borderRadius: '10px',
							    background: 'rgba(6, 95, 70, 0.1)',
							    color: '#065f46',
							    border:' 1px solid rgba(6, 95, 70, 0.2)'
					}" @click="ToSet"></up-button>
				<up-button text="探索活动" iconColor="#fff" icon="camera" size="small" :customStyle="{
						height: '44px',
						borderRadius: '10px',
						border: 'none',
						color: '#ffffff',
						background: 'linear-gradient(135deg, #10b981, #059669)',
						boxShadow: '0 4px 16px rgba(16, 185, 129, 0.3)'
				}" @click="ToAct"></up-button>
			</view>
		</blcok>
	</view>

	<view class="level-progress-card">
		<view class="progress-header">
			<view class="progress-title-section">
				<view class="progress-icon iconfont">&#xe6be;</view>
				<view class="progress-title">等级进度</view>
			</view>
			<view class="current-points">
				<text class="primary-color font-lg">{{ PageData.Data.integral }}</text>
				<text>/</text>
				<text>999 积分</text>
			</view>
		</view>
		<view class="up-m-b-32">
			<up-line-progress :showText="false" :percentage="0" height="12px" inactiveColor="#CBD5E1"
				activeColor="#2563EB"></up-line-progress>
		</view>
		<view class="up-flex up-flex-between up-flex-items-center up-m-b-48">
			<Tag name="one" text="资深骑士" icon="&#xe799;"></Tag>
			<Tag name="next" text="传奇骑士" icon="&#xe646;"></Tag>
		</view>
		<view class="points-needed">
			<view class="needed-icon iconfont">&#xe65b;</view>
			<view>还需<text class="font-weight-bold up-p-l-6 up-p-r-6">999</text>积分升到下一级</view>
		</view>
	</view>

	<!-- <view class="level-progress-card">
		<view class="progress-header">
			<view class="progress-title-section">
				<view class="progress-icon huiz-icon iconfont">&#xe671;</view>
				<view class="progress-title">最近获得的徽章</view>
			</view>
			<view class="view-all-btn">
				<view>查看全部</view>
				<view class="iconfont">&#xe67f;</view>
			</view>
		</view>
		<view class="badges-grid">
			<view class="badge-item">
				<up-image
					src="https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=2024%20new%20year%20cycling%20badge%20icon&image_size=square"
					width="56px" height="56px" shape="circle"></up-image>
				<view class="up-m-t-24">
					<view class="badge-name">2024新年骑行徽章</view>
					<view class="badge-time">2024-01-01</view>
				</view>
			</view>
			<view class="badge-item">
				<up-image
					src="https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=2024%20new%20year%20cycling%20badge%20icon&image_size=square"
					width="56px" height="56px" shape="circle"></up-image>
				<view class="up-m-t-24">
					<view class="badge-name">2024新年骑行徽章</view>
					<view class="badge-time">2024-01-01</view>
				</view>
			</view>
			<view class="badge-item">
				<up-image
					src="https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=2024%20new%20year%20cycling%20badge%20icon&image_size=square"
					width="56px" height="56px" shape="circle"></up-image>
				<view class="up-m-t-24">
					<view class="badge-name">2024新年骑行徽章</view>
					<view class="badge-time">2024-01-01</view>
				</view>
			</view>
		</view>
	</view> -->

	<view class="menu-sections">
		<view class="menu-section" v-for="menu in PageData.Menu" :key="menu.name">
			<view class="section-title">
				<view class="iconfont" v-html=" menu.icon"></view>
				<view>{{ menu.name }}</view>
			</view>
			<view class="menu-items">
				<view class="menu-item" v-for="item in menu.List" :key="item.name" @click="MenuTo(item)">
					<view class="menu-icon iconfont" v-html="item.icon"></view>
					<view class="menu-content">
						<view class="menu-label">{{ item.name }}</view>
						<view class="menu-desc">{{ item.desc }}</view>
					</view>
					<view class="menu-arrow iconfont">&#xe72e;</view>
				</view>
			</view>
		</view>
	</view>

	<view class="logout-section">
		<up-button text="退出登录" icon="minus-circle" iconColor="#FFF" :customStyle="{
				height: '54px',
				borderRadius: '12px',
				fontSize: '14px',
				color: '#ffffff',
				background: 'linear-gradient(135deg, #ef4444, #dc2626)',
				boxShadow: '0 10px 28px rgba(239, 68, 68, 0.35), 0 4px 12px rgba(0, 0, 0, 0.1)'
		}" @click="LoginOut"></up-button>
	</view>

</template>

<script setup>
	import Page from '@/components/Page.vue';
	import Tag from '@/components/Tag.vue'
	import MineApi from '@/Api/Mine.js'
	import {
		removeToken
	} from '@/utils/auth.js';
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	import Util from '@/utils/common.js'

	const PageData = ref({
		auth: uni.getStorageSync("auth") || 0,
		Info: {},
		Data: {},
		Menu: [{
			name: '活动',
			icon: '&#xe602;',
			List: [{
				name: '我的活动',
				desc: '查看参与的活动',
				icon: '&#xe602;',
				path: '/subPackages/activity/Join'
			}, {
				name: '组织的活动',
				desc: '我发起的活动',
				icon: '&#xe606;',
				path: '/subPackages/activity/Create'
			}]
		}, {
			name: '车辆',
			icon: '&#xe605;',
			List: [{
				name: '我的车辆',
				desc: '查看我的车辆',
				icon: '&#xe605;',
			}, {
				name: '添加车辆',
				desc: '添加我的车辆',
				icon: '&#xe604;',
			}]
		}, {
			name: '其他',
			icon: '&#xe643;',
			List: [{
				name: '帮助中心',
				desc: '常见问题和客服',
				icon: '&#xe623;',
			}, {
				name: '关于我们',
				desc: '版本信息和反馈',
				icon: '&#xeafe;',
			}]
		}]
	})

	onShow(() => {
		// 获取我的信息
		MineApi.Info().then(resp => {
			PageData.value.Info = resp.data.Info
			PageData.value.Data = resp.data.Data
		})
	})


	const ToOver = () => {
		uni.navigateTo({
			url: '/subPackages/mine/Register'
		})
	}

	const MenuTo = (menu) => {
		if (!menu.path) {
			Util.toast("暂无权限浏览")
			return
		}
		uni.navigateTo({
			url: menu.path
		})
	}

	const ToAct = () => {
		uni.switchTab({
			url: '/pages/Event'
		})
	}

	const ToSet = () => {
		uni.navigateTo({
			url: '/subPackages/mine/Set'
		})
	}
	
	const LoginOut = () => {
		removeToken()
		uni.removeStorageSync("auth")
		uni.removeStorageSync("UserInfo")
		uni.reLaunch({
			url: '/pages/NineBot'
		})
	}
	
</script>

<style lang="scss" scoped>
	.user-card {
		margin: 24px;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 24px;
		padding: 32px;
		color: white;
		position: relative;
		overflow: hidden;
		box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);

		.user-avatar-section {
			display: flex;
			align-items: center;
			gap: 24px;
			margin-bottom: 40px;
			position: relative;
			z-index: 1;

			.avatar-container {
				position: relative;
				padding: 4px;
				background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
				border-radius: 50%;
				box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);

				.user-avatar {
					width: 80px;
					height: 80px;
					border-radius: 50%;
					object-fit: cover;
					border: 2px solid rgba(255, 255, 255, 0.8);
					transition: transform 0.3s ease;
				}
			}

			.user-basic-info {
				flex: 1;
				min-width: 0;

				.user-name {
					font-size: 22px;
					font-weight: 700;
					margin-bottom: 8px;
					text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				}

				.user-level {
					display: flex;
					align-items: center;
					gap: 8px;
					margin-bottom: 10px;
					padding: 6px 12px;
					background: rgba(255, 255, 255, 0.2);
					border-radius: 12px;
					backdrop-filter: blur(10px);
					border: 1px solid rgba(255, 255, 255, 0.3);
					width: -moz-fit-content;
					width: fit-content;
					font-size: 12px;

					.iconfont {
						font-size: 12px;
					}
				}

				.user-id {
					font-size: 14px;
					opacity: 0.8;
					font-weight: 500;
				}

			}
		}

		.user-stats {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 16px;
			position: relative;
			z-index: 1;

			.stat-item {
				display: flex;
				align-items: center;
				gap: 12px;
				padding: 16px;
				background: rgba(255, 255, 255, 0.15);
				border-radius: 16px;
				backdrop-filter: blur(10px);
				border: 1px solid rgba(255, 255, 255, 0.2);
				cursor: pointer;
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

				.stat-content {
					flex: 1;
					min-width: 0;

					.stat-number {
						font-size: 20px;
						font-weight: 700;
						margin-bottom: 2px;
						text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
					}

					.stat-label {
						font-size: 10px;
						opacity: 0.9;
						font-weight: 500;
					}
				}
			}
		}
	}

	.profile-completion-card {
		background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%);
		border: 1px solid rgba(251, 191, 36, 0.3);
		border-radius: 20px;
		padding: 24px;
		margin: 20px;
		box-shadow: 0 8px 32px rgba(251, 191, 36, 0.15);
		position: relative;
		overflow: hidden;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
			pointer-events: none;
		}

		&.completed {
			background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 50%, #34d399 100%);
			border: 1px solid rgba(52, 211, 153, 0.3);
			box-shadow: 0 8px 32px rgba(52, 211, 153, 0.15);

			&::before {
				background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
			}
		}

		.completion-header {
			display: flex;
			align-items: flex-start;
			gap: 16px;
			margin-bottom: 20px;
			position: relative;
			z-index: 1;

			.completion-icon {
				width: 36px;
				height: 36px;
				background: linear-gradient(135deg, #f59e0b, #d97706);
				border-radius: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
				flex-shrink: 0;

				&.iconfont {
					font-size: 18px;
				}
			}

			.celebration-icon {
				width: 36px;
				height: 36px;
				background: linear-gradient(135deg, #10b981, #059669);
				border-radius: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
				flex-shrink: 0;
			}

			.completion-title {
				.title {
					font-size: 16px;
					font-weight: 700;
					color: #92400e;
					margin: 0 0 4px 0;
				}

				.desc {
					font-size: 11px;
					color: #a16207;
				}

				&.completed {
					.title {
						color: #065f46;
					}

					.desc {
						color: #047857;
					}
				}
			}

		}

		.missing-items {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			margin-bottom: 20px;
			position: relative;
			z-index: 1;
		}

		.rewards-section {
			display: flex;
			flex-direction: column;
			gap: 8px;
			margin-bottom: 20px;
			position: relative;
			z-index: 1;

			.reward-item {
				display: flex;
				align-items: center;
				gap: 8px;
				padding: 8px 12px;
				background: rgba(6, 95, 70, 0.1);
				border: 1px solid rgba(6, 95, 70, 0.2);
				border-radius: 10px;
				font-size: 12px;
				color: #065f46;
				transition: all 0.3s ease;
				animation: rewardSlideIn-b01e9175 0.6s ease-out;

				.reward-icon {
					display: flex;
					align-items: center;
					justify-content: center;
					color: #047857;

					&.iconfont {
						font-size: 16px;
					}
				}

				.reward-text {
					font-weight: 500;
				}
			}
		}

		.action-buttons {
			display: flex;
			gap: 12px;
		}
	}

	.level-progress-card {
		box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 24px;
		position: relative;
		background: linear-gradient(135deg, rgb(255, 255, 255), rgb(248, 250, 252));
		margin: 1.5rem;
		padding: 24px;
		border-radius: 20px;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(148, 163, 184, 0.2);
		border-image: initial;
		overflow: hidden;

		&::before {
			content: "";
			position: absolute;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			pointer-events: none;
			background: linear-gradient(135deg, rgba(59, 130, 246, 0.02), rgba(147, 51, 234, 0.02));
		}

		.progress-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24px;
			position: relative;
			z-index: 1;

			.progress-title-section {
				display: flex;
				align-items: center;
				gap: 12px;

				.progress-icon {
					width: 36px;
					height: 36px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: rgb(255, 255, 255);
					font-size: 18px;
					background: linear-gradient(135deg, rgb(59, 130, 246), rgb(37, 99, 235));
					border-radius: 12px;

					&.huiz-icon {
						color: rgb(255, 255, 255);
						background: linear-gradient(135deg, rgb(245, 158, 11), rgb(217, 119, 6));
					}
				}

				.progress-title {
					font-size: 16px;
					font-weight: bolder;
					color: rgb(30, 41, 59);
				}
			}

			.current-points {
				display: flex;
				align-items: baseline;
				font-weight: 600;
				gap: 4px;
				font-size: 14px;
				color: rgb(100, 116, 139);
			}

			.view-all-btn {
				display: flex;
				align-items: center;
				color: rgb(245, 158, 11);
				font-size: 12px;
				font-weight: 600;
				gap: 6px;
				background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(251, 191, 36, 0.1));
				border-width: 1px;
				border-style: solid;
				border-color: rgba(245, 158, 11, 0.2);
				border-image: initial;
				padding: 8px 12px;
				border-radius: 12px;
				transition: 0.3s;
			}
		}

		.badges-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 12px;
			// margin-bottom: 24px;

			.badge-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				text-align: center;
				position: relative;
				transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				padding: 16px 12px;
				border-radius: 16px;
				background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(248, 250, 252, 0.8));
				border-width: 1px;
				border-style: solid;
				border-color: rgba(148, 163, 184, 0.1);
				border-image: initial;
				overflow: hidden;

				&::before {
					content: "";
					position: absolute;
					top: 0px;
					left: 0px;
					right: 0px;
					bottom: 0px;
					opacity: 0;
					background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(251, 191, 36, 0.05));
					transition: opacity 0.3s;
				}

				.badge-name {
					font-size: 12px;
					color: rgb(30, 41, 59);
					font-weight: 600;
					margin-bottom: 4px;
				}

				.badge-time {
					font-size: 10px;
					color: rgb(100, 116, 139);
				}
			}
		}

		.points-needed {
			display: flex;
			align-items: center;
			font-size: 14px;
			color: rgb(71, 85, 105);
			position: relative;
			z-index: 1;
			gap: 8px;
			padding: 12px 16px;
			background: linear-gradient(135deg, rgb(241, 245, 249), rgb(226, 232, 240));
			border-radius: 12px;
			border-width: 1px;
			border-style: solid;
			border-color: rgba(148, 163, 184, 0.2);
			border-image: initial;

			.needed-icon {
				width: 20px;
				height: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: rgb(255, 255, 255);
				font-size: 12px;
				flex-shrink: 0;
				background: linear-gradient(135deg, rgb(245, 158, 11), rgb(217, 119, 6));
				border-radius: 6px;
			}

		}

	}


	.menu-sections {
		margin-top: 32px;
		padding: 0px 28px;

		.menu-section {
			margin-bottom: 32px;

			.section-title {
				display: flex;
				align-items: center;
				font-size: 16px;
				font-weight: bolder;
				color: rgb(30, 41, 59);
				margin-bottom: 16px;
				gap: 12px;
				padding: 0px 8px;

				.iconfont {
					font-size: 20px;
				}
			}

			.menu-items {
				box-shadow: rgba(0, 0, 0, 0.1) 0px 12px 32px, rgba(0, 0, 0, 0.05) 0px 4px 16px;
				position: relative;
				backdrop-filter: blur(10px);
				background: linear-gradient(135deg, rgb(255, 255, 255), rgb(248, 250, 252));
				border-radius: 24px;
				border-width: 1px;
				border-style: solid;
				border-color: rgba(148, 163, 184, 0.15);
				border-image: initial;
				overflow: hidden;

				&::before {
					content: "";
					position: absolute;
					top: 0px;
					left: 0px;
					right: 0px;
					bottom: 0px;
					pointer-events: none;
					background: linear-gradient(135deg, rgba(99, 102, 241, 0.03), rgba(79, 70, 229, 0.03));
				}

				.menu-item {
					display: flex;
					align-items: center;
					cursor: pointer;
					position: relative;
					z-index: 1;
					padding: 22px 24px;
					border-bottom: 1px solid rgba(148, 163, 184, 0.08);
					transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

					&::before {
						content: "";
						position: absolute;
						top: 0px;
						left: 0px;
						right: 0px;
						bottom: 0px;
						opacity: 0;
						background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(79, 70, 229, 0.08));
						transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
					}

					.menu-icon {
						width: 34px;
						height: 34px;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 20px;
						position: relative;
						z-index: 1;
						box-shadow: rgba(99, 102, 241, 0.35) 0px 8px 24px, rgba(0, 0, 0, 0.1) 0px 4px 12px;
						background: linear-gradient(135deg, rgb(99, 102, 241), rgb(79, 70, 229));
						border-radius: 10px;
						transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
						border-width: 2px;
						border-style: solid;
						border-color: rgba(255, 255, 255, 0.2);
						border-image: initial;

						&.iconfont {
							font-size: 18px;
							color: #fff;
						}
					}

					.menu-content {
						position: relative;
						z-index: 1;
						flex: 1 1 0%;

						.menu-label {
							font-size: 14px;
							font-weight: 700;
							color: rgb(30, 41, 59);
							margin-bottom: 6px;
							letter-spacing: -0.3px;
							line-height: 1.3;
							transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
						}

						.menu-desc {
							font-size: 12px;
							color: rgb(100, 116, 139);
							line-height: 1.5;
							font-weight: 500;
							opacity: 0.9;
						}
					}

					.menu-arrow {
						color: rgb(148, 163, 184);
						position: relative;
						z-index: 1;
						transition: 0.3s;
					}
				}
			}
		}
	}

	.logout-section {
		padding: 0 24px;
		margin-top: 20px;
		margin-bottom: 32px;
	}
</style>